<template>
    <!-- 待开发图片信息 -->
    <div class="container" @click="navigateToTarget">
        <img src="../assets/image/lodding.png" class="centered-image" />
    </div>
</template>

<script>
export default {
    name: 'Lodding',
    data() {
        return {};
    },
    methods: {
        navigateToTarget() {
            // 使用编程式导航跳转到目标组件
            this.$router.push('/homes');
        }
    }
};
</script>

<style scoped>
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60vh;
    /* 使图片在页面高度内居中 */
}

.centered-image {
    width: 450px;
    /* 控制图片大小 */
    height: auto;
    cursor: pointer;
    /* 鼠标悬停时变为手型，表示可点击 */
    transition: transform 0.3s;
    /* 添加动画效果 */
}

.centered-image:hover {
    transform: scale(1.1);
    /* 鼠标悬停时稍微放大 */
}
</style>
